<template>
	<view class="ccontainer">
		<!-- 搜索 -->
		<view class="indexNav cflex cflex_row cflex_between cflex_items" :style="{paddingTop:statusBarHeight + 27 + 'rpx'}">
			<view class="indexNav-left cflex cflex_row cflex_between cflex_items">
				<image class="indexNav-leftImage" src="/static/clq-image/index-search-icon.png" mode=""></image>
				<input class="cflex cflex_1" type="text" @blur="inputText" v-model="search" placeholder="搜索商品"/>
				<image @click="cancelSearch" class="indexNav-rightImage" src="/static/clq-image/search-error.png" mode=""></image>
			</view>
			
			<view class="indexNav-search cflex cflex_row cflex_items" @click="turnPage" data-type="1">搜索</view>
		</view>
		
		<view class="pageBlock cflex cflex_col" :style="{paddingTop:statusBarHeight + 100 + 'rpx'}">
			<view class="recentBlock cflex cflex_col">
				<view class="recent-title cflex cflex_row cflex_between cflex_items">
					<view>最近搜索</view>
					<view class="recent-Icon cflex cflex_row cflex_items" @click="cancelRecent">
						<view>删除</view>
						<image src="/static/clq-image/search-cancel.png" mode=""></image>
					</view>
				</view>
				<view class="recent-content cflex cflex_row cflex_wrap cflex_items">
					<block v-for="(item,index) in recentList" :key="index">
						<view class="recentItem cflex cflex_row cflex_center cflex_items" @click="turnPage" data-type="2" :data-item="item">{{item}}</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:'',
				search:'',
				recentList:[]
			}
		},
		onShow:function(opt){
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					let screenHeight = parseFloat(res.screenHeight * 2)
					let statusBarHeight = parseFloat(res.statusBarHeight * 2)
					that.statusBarHeight = statusBarHeight
					that.Height = screenHeight - statusBarHeight
					console.log('that.Height', that.Height)
				}
			})
			let recentList = uni.getStorageSync('recentList')
			
			if(recentList){
				that.recentList = recentList
			}else{
				that.recentList = []
			}
			
		},
		methods:{
			turnPage(e){
				let that = this
				let type = e.currentTarget.dataset.type
				if(type == 1){
					if(that.search == ''){
						uni.showToast({
							title: '请输入关键词',
							duration: 1500,
							icon: 'none'
						});
					}else{
						if(that.recentList.length == 0){
							that.recentList.push(that.search)
						}else{
							for (let i = 0; i < that.recentList.length; i++) {
								if (that.recentList[i] == that.search) {
									that.recentList.splice(i, 1);
								}
							}
							that.recentList.unshift(that.search)
						}
						uni.setStorageSync('recentList',that.recentList)
						uni.navigateTo({
							url:"/pages/clq_searchResult/clq_searchResult?search=" + that.search
						})
					}
				}else if(type == 2){
					let search =  e.currentTarget.dataset.item
					console.log('点击search',search)
					if(that.recentList.length == 0){
						that.recentList.push(search)
					}else{
						for (let i = 0; i < that.recentList.length; i++) {
							if (that.recentList[i] == search) {
								that.recentList.splice(i, 1);
							}
						}
						that.recentList.unshift(search)
					}
					uni.setStorageSync('recentList',that.recentList)
					uni.navigateTo({
						url:"/pages/clq_searchResult/clq_searchResult?search=" + that.search
					})
				}
				that.search = ''
			},
			inputText(e){
				let that = this
				that.serch = e.detail.value
				console.log('搜素关键词serch',that.serch)
			},
			cancelSearch(){
				let that = this
				that.search = ''
			},
			cancelRecent(){
				let that = this
				that.recentList = []
				uni.setStorageSync('recentList',that.recentList)
				uni.showToast({
					title: '清空成功',
					duration: 1500,
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	/* 搜索 */
	.indexNav {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 25rpx 50rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
	}
	
	.indexNav-search {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	
	.indexNav-left {
		width: 580rpx;
		height: 56rpx;
		background: #f7f7f7;
		border-radius: 28rpx;
	}
	.indexNav-left input{
		font-size: 28rpx;
		font-weight: 500;
		color: #555555;
	}
	
	.indexNav-leftImage {
		width: 38rpx;
		height: 38rpx;
		margin: 0 33rpx 0 19rpx;
	}
	.indexNav-rightImage{
		width: 30rpx;
		height: 30rpx;
		margin-right: 19rpx;
	}
	
	/* ========================================== */
	.pageBlock{
		width: 100%;
		box-sizing: border-box;
	}
	
	.recentBlock{
		width: 100%;
		box-sizing: border-box;
		margin-top: 26rpx;
	}
	.recent-title{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 46rpx 0 20rpx;
	}
	.recent-Icon{
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.recent-Icon image{
		width: 22rpx;
		height: 22rpx;
		margin-left: 6rpx;
	}
	.recent-content{
		padding: 40rpx 30rpx 17rpx 30rpx;
	}
	.recentItem{
		min-width: 82rpx;
		height: 50rpx;
		border: 1rpx solid #555555;
		border-radius: 10rpx;
		margin: 0 22rpx 20rpx 0;
		padding:0 24rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
</style>
